<template>
  <div style="text-align:center">
    <a-card title="销售单详情">
      <a-button slot="extra" type="primary" style="margin-right: 8px;" ghost v-print="'#printContent'"> <a-icon type="printer" />打印</a-button>
      <a-button slot="extra" type="primary" ghost @click="() => { this.$router.go(-1); }"> <a-icon type="left" />返回</a-button>
      
      <section id="printContent" style="width:800px;align:center">
        <div style="text-align:center"><h3>温州励鑫金属有限公司发货单（0577-89997188）</h3></div>
        <table id="dishihuizong" width="100%" border="1" cellspacing="1" cellpadding="4" bgcolor="#fefefe" class="tabtop13" align="center"> 
        <tr>
          <td  width="13%" class="btbg font-center titfont">客户名称</td>
          <td width="10%" class="btbg font-center" >{{ info.client_name }}</td>
          <td width="13" class="btbg font-center titfont" >联系电话</td>
          <td width="13%" class="btbg font-center" >{{ info.client_phone }}</td>
          <td width="13" class="btbg font-center titfont" >经手人</td>
          <td width="13%" class="btbg font-center" >{{ info.handler_name }}</td>
          <td width="13" class="btbg font-center titfont" >发货时间</td>
          <td width="19%" class="btbg font-center" >{{ info.handle_time }}</td>
        </tr>
      </table>
        <table id="dishihuizong" width="100%" border="1" cellspacing="1" cellpadding="4" bgcolor="#fefefe" class="tabtop13" align="center"> 
        <tr>
          <td  width="7%" rowspan="2" class="btbg font-center titfont">序号</td>
          <td width="10%"  rowspan="2" class="btbg font-center" >商品名称</td>
          <td width="13%" rowspan="2"  class="btbg font-center titfont" >规格</td>
          <td width="10%"  rowspan="2" class="btbg font-center" >尺寸</td>
          <td width="8%"  rowspan="2" class="btbg font-center titfont" >弧长</td>
          <td width="13%" colspan="3" class="btbg font-center" >材料费</td>
          <td width="13%" colspan="3" class="btbg font-center titfont" >加工费</td>
          <td width="19%"  rowspan="2" class="btbg font-center" >总金额</td>
        </tr>
        <tr>
          <td  width="7%" class="btbg font-center titfont">数量</td>
          <td width="7%" class="btbg font-center" >单价</td>
          <td width="7%" class="btbg font-center titfont" >金额</td>
          <td  width="7%" class="btbg font-center titfont">数量</td>
          <td width="7%" class="btbg font-center" >单价</td>
          <td width="7%" class="btbg font-center titfont" >金额</td>          
        </tr>
        <!-- <tr :v-for="(item,index) in info">
             <td>{{index}}</td>         
        <tr/> -->
      </table>
        <a-spin :spinning="loading">
          <!-- <img id="barcode" style="float: right" /> 
          <a-descriptions bordered>
           <a-descriptions-item label="销售编号">
              {{ info.number }}
            </a-descriptions-item> 
            <a-descriptions-item label="客户名称">
              {{ info.client_name }}
            </a-descriptions-item>
            <a-descriptions-item label="联系电话">
              {{ info.client_phone }}
            </a-descriptions-item>
            <a-descriptions-item label="仓库">
              {{ info.warehouse_name }}
            </a-descriptions-item> 
            <a-descriptions-item label="经手人">
              {{ info.handler_name }}
            </a-descriptions-item>
            <a-descriptions-item label="发货时间">
              {{ info.handle_time }}
            </a-descriptions-item>
             <a-descriptions-item label="其他费用">
              {{ info.other_amount }}
            </a-descriptions-item>
            <a-descriptions-item label="备注">
              {{ info.remark }}
            </a-descriptions-item> 
          </a-descriptions>-->
  
          <!-- <a-divider orientation="center" style="margin: 8px;">销售商品清单</a-divider> -->
          <a-table
            border
            rowKey="id"
            size="middle"
            :columns="columns"
            :data-source="info.sales_goods_items"
            :pagination="false" />
            <!-- <a-divider orientation="center" style="margin: 8px;">财务信息</a-divider> -->
    
      <table id="dishihuizong" width="100%" border="1" cellspacing="1" cellpadding="1" bgcolor="#fefefe" class="tabtop13" align="center"> 
        <tr>
          <td  width="18%" class=" font-center titfont">总计金额（大写）</td>
          <td width="30%" class=" font-center dxfont" >{{ convertCurrency(info.total_amount) }}</td>
          <td width="13" class=" font-center titfont" >已付款(元)</td>
          <td width="13%" class=" font-center " >{{ info.collection_amount }}</td>
          <td width="13" class=" font-center titfont" >结算账户</td>
          <td width="13%" class=" font-center " >{{ info.sales_account_items[0].account_name }}</td>         
        </tr>
        <tr>                    
           <td width="13" class=" font-center titfont" >欠款(元)</td>
          <td width="13%" class=" font-center " >{{ info.total_amount - info.collection_amount }}</td>
          <td width="13" class=" font-center titfont" >客户签印：</td>
          <td colspan="3" width="19%" class=" font-center " >{{nyr}} </td>
        </tr>
      </table>
        </a-spin>
      </section>
    </a-card>
  </div>
</template>

<script>
  import { saleOrderDetail } from '@/api/sale'
  import JsBarcode from 'jsbarcode'

export default {
    data() {
      return {
        nyr:`       年    月    日`,
        loading: false,
        materialLoading: false,
        receiptOrder: undefined,
        info: {},
        columns: [
          {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 45,
            customRender: (value, item, index) => {
              return item.isTotal ? '合计' : (index + 1)
            },
          },
          {
            title: '商品名称',
            dataIndex: 'goods_name',
            key: 'goods_name',
            width: 60,
          },
        {
          title: "规格",
          dataIndex: "guige",
          key: "guige",
          width: 60,
          align:'center',
        },
        {
          title: "尺寸",
          dataIndex: "chicun",
          key: "chicun",
          width: 40,
          align:'center',
          scopedSlots: { customRender: "chicun" },
        },
        {
          title: "弧长",
          dataIndex: "huchang",
          key: "huchang",
          width: 40,
          align:'center',
          scopedSlots: { customRender: "huchang" },
        },
        {
          title: "材料费",
          dataIndex: "clf",
          key: "clf",
          align:'center',
          children:[
            {
          title: "数量",
          dataIndex: "clsl",
          key: "clsl",
          width: 40,
          align:'center',
          scopedSlots: { customRender: "clsl" },
        },
        {
          title: "单价",
          dataIndex: "cldj",
          key: "cldj",
          width: 40,
          align:'center',
          scopedSlots: { customRender: "cldj" },
        },
        {
          title: "金额",
          dataIndex: "clAmount",
          key: "clAmount",
          width: 40,
          align:'center',
          customRender: (value, item) => {
            if (item.isTotal) return value;
            value = NP.times(item.clsl, item.cldj);
            return item.id ? NP.round(value, 2) : "";
          },
        },
          ],
        },
                {
          title: "加工费",
          dataIndex: "jgf",
          key: "jgf",
          align:'center',
          children:[
            {
          title: "数量",
          dataIndex: "jgsl",
          key: "jgsl",
          width: 40,
          align:'center',
          scopedSlots: { customRender: "jgsl" },
        },
        {
          title: "单价",
          dataIndex: "jgdj",
          key: "jgdj",
          width: 40,
          align:'center',
          scopedSlots: { customRender: "jgdj" },
        },
        {
          title: "金额",
          dataIndex: "jgAmount",
          key: "jgAmount",
          width: 40,
          align:'center',
          customRender: (value, item) => {
            if (item.isTotal) return value;
            value = NP.times(item.jgsl, item.jgdj);
            return item.id ? NP.round(value, 2) : "";
          },
        },
          ]
        },
        {
          title: "总金额",
          dataIndex: "totalAmount",
          key: "totalAmount",
          width: 60,
          align:'center',
          customRender: (value, item) => {
            if (item.isTotal) return value;
            value = NP.times(item.clsl, item.cldj)+
            NP.times(item.jgsl, item.jgdj);
            // value =item.clAmount+item.jgAmount;
            return item.id ? NP.round(value, 2) : "";
          },
        }
        ],
        columnsAccount: [
          {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 45,
            customRender: (value, item, index) => {
              return item.isTotal ? '合计' : (index + 1)
            },
          },
          {
            title: '结算账户',
            dataIndex: 'account_name',
            key: 'account_name',
            width: 200,
          },
          {
            title: '付款金额',
            dataIndex: 'collection_amount',
            key: 'collection_amount',
            width: 200,
          }
        ],
      }
    },
    created(){
      this.initData();
    },
    methods: {
  convertCurrency(money) {
  //汉字的数字
  var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖');
  //基本单位
  var cnIntRadice = new Array('', '拾', '佰', '仟');
  //对应整数部分扩展单位
  var cnIntUnits = new Array('', '万', '亿', '兆');
  //对应小数部分单位
  var cnDecUnits = new Array('角', '分', '毫', '厘');
  //整数金额时后面跟的字符
  var cnInteger = '整';
  //整型完以后的单位
  var cnIntLast = '元';
  //最大处理的数字
  var maxNum = 999999999999999.9999;
  //金额整数部分
  var integerNum;
  //金额小数部分
  var decimalNum;
  //输出的中文金额字符串
  var chineseStr = '';
  //分离金额后用的数组，预定义
  var parts;
  if (money == '') { return ''; }
  money = parseFloat(money);
  if (money >= maxNum) {
    //超出最大处理数字
    return '';
  }
  if (money == 0) {
    chineseStr = cnNums[0] + cnIntLast + cnInteger;
    return chineseStr;
  }
  //转换为字符串
  money = money.toString();
  if (money.indexOf('.') == -1) {
    integerNum = money;
    decimalNum = '';
  } else {
    parts = money.split('.');
    integerNum = parts[0];
    decimalNum = parts[1].substr(0, 4);
  }
  //获取整型部分转换
  if (parseInt(integerNum, 10) > 0) {
    var zeroCount = 0;
    var IntLen = integerNum.length;
    for (var i = 0; i < IntLen; i++) {
      var n = integerNum.substr(i, 1);
      var p = IntLen - i - 1;
      var q = p / 4;
      var m = p % 4;
      if (n == '0') {
        zeroCount++;
      } else {
        if (zeroCount > 0) {
          chineseStr += cnNums[0];
        }
        //归零
        zeroCount = 0;
        chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
      }
      if (m == 0 && zeroCount < 4) {
        chineseStr += cnIntUnits[q];
      }
    }
    chineseStr += cnIntLast;
  }
  //小数部分
  if (decimalNum != '') {
    var decLen = decimalNum.length;
    for (var i = 0; i < decLen; i++) {
      var n = decimalNum.substr(i, 1);
      if (n != '0') {
        chineseStr += cnNums[Number(n)] + cnDecUnits[i];
      }
    }
  }
  if (chineseStr == '') {
    chineseStr += cnNums[0] + cnIntLast + cnInteger;
  } else if (decimalNum == '') {
    chineseStr += cnInteger;
  }
  return chineseStr;
  },
      // getJsBarcode(number) {
      //   JsBarcode("#barcode", number, {
      //     lineColor: '#000',
      //     width: 2,
      //     height: 40,
      //     displayValue: true
      //   });
      // },
      initData() {
        this.loading = true;
        saleOrderDetail({ id: this.$route.query.id }).then(data => {
          this.info = data;
          this.info.sales_account_items = [
            ...this.info.sales_account_items,
            {
              id: '-1',
              isTotal: true,
              collection_amount: this.info.collection_amount
            },
          ];
          let Amount=this.getgoodsData(this.info.sales_goods_items)
          this.info.sales_goods_items = [
            ...this.info.sales_goods_items,
            {
              id: '-1',
              isTotal: true,
              sales_quantity: this.info.total_quantity,
              clAmount:Amount.clAmount,
              jgAmount:Amount.jgAmount,
              totalAmount: this.info.total_amount,
            },
          ];
            
          // this.getJsBarcode(data.number)
        }).finally(() => {
          this.loading = false;
        });
        this.getgoodsData(this.info.sales_goods_items)       
      },
      getgoodsData(sales_goods_items){
          // 统计合计
      let clAmount = 0,
          jgAmount = 0;
        this.zongjine=0;
      for (let item of sales_goods_items) {
        clAmount = NP.plus(clAmount,item.clAmount);
        jgAmount = NP.plus(jgAmount,item.jgAmount);        
      }
      return{clAmount,jgAmount}
      }
    },
    mounted() {
      this.initData();
    },
  }
</script>
<style scoped>
::v-deep .ant-table-tbody {
  border-collapse: collapse;
}
::v-deep .ant-table-thead > tr > th {
  padding: 2px!important;
  border: solid 0.5px #000000;
  font-size: 12px;
  color: #000000;
  background: #fcfcfc!important;   
}
::v-deep .ant-table-tbody .ant-table-row:nth-child(odd) {
    border: solid 1px #000000;
}

::v-deep .ant-table-tbody .ant-table-row:nth-child(even) {
    background-color: #f8f8f8;
}
.ant-table-tbody > tr > td {
  padding: 2px!important;
  border: solid 0.5px #000000;
}
.ant-table-thead > tr >th{
    background: #f1efea  !important; 
    padding: 2px!important;
    border: solid 1px #000000;
    
}
table{
      /* 边框合并 */
      border-collapse: collapse;
} 
.titfont {
		font-family: 微软雅黑;
	font-size: 12px;
	font-weight: bold;
	/* background: url(../images/ico3.gif) no-repeat 15px center; */
	background-color:#efefef;
}
.dxfont {
	font-family: 微软雅黑;
	font-size: 14px;
	font-weight: bold;
}
.font-center{ text-align:center;
color: #000000;
}
</style>
